<template>
  <div id="home">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="showpop"
    />
    <div v-show="$route.path == '/home'">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.image_url" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类 -->
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(item, index) in channel"
          :key="index"
          :icon="item.icon_url"
          :text="item.name"
           :to="{path:'/channel',query:{id:item.id,num:index}}"
        />
      </van-grid>
      <!-- 品牌 -->
      <div id="pin">
        <h1>品牌制造商直购</h1>
        <ul>
          <li v-for="(item, index) in brandList" :key="index" @click="Rout(item.id)" >
            <div>
              <h4>{{ item.name }}</h4>
              <p>{{ item.floor_price | price }}</p>
            </div>
            <h2>
              <img :src="item.app_list_pic_url" alt="" width="100%"/>
            </h2>
          </li>
        </ul>
      </div>
      <!-- 周一周四新品 -->
      <div id="newgoods">
        <h1>周一周四·新品首发</h1>
        <ul>
          <li v-for="(item, index) in newgoods" :key="index" @click="goods(item.id)">
            <h2>
              <img :src="item.list_pic_url" alt="" width="100%" />
            </h2>
            <div>
              <h4>{{ item.name }}</h4>
              <p>{{ item.retail_price | price }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 人气推荐 -->
      <div id="hot">
        <h1>人气推荐</h1>
        <ul>
          <li v-for="(item, index) in hotgoods" :key="index">
            <h2>
              <img :src="item.list_pic_url" alt="" width="100%" />
            </h2>
            <div>
              <h4>{{ item.goods_brief }}</h4>
              <h5>{{ item.name }}</h5>
              <p>{{ item.retail_price | price }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 专题精选 -->
      <div id="topic">
        <h1>专题精选</h1>
        <van-swipe :loop="false" :width="300" :show-indicators="bool">
          <van-swipe-item v-for="(item,index) in topic" :key="index" >
             <div>
                <h2>
                  <img :src="item.item_pic_url" alt="" >
                </h2>
                <h3>{{item.title}} <span>{{item.price_info | price}}</span></h3>
                <p>{{item.subtitle}}</p>
             </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 商品 -->
      <div id="goods">
        <div v-for="(item, index) in category" :key="index" class="goodlist">
          <h1>{{ item.name }}</h1>
          <ul>
            <li v-for="(item1, index) in item.goodsList" :key="index">
              <h2>
                <img :src="item1.list_pic_url" alt="" width="100%" />
              </h2>
              <div>
                <h4>{{ item1.name }}</h4>
                <p>{{ item1.retail_price | price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
       
    </div>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
   
  </div>
</template>

<script>
  //引入请求数据
import { GetHomeList ,} from "../request/api";
export default {
  data() {
    return {
      bool:false,
      value: "",
      banner: [],
      channel: [],
      brandList: [],
      newgoods: [],
      hotgoods: [],
      topic:[],
      category: [],
      
    };
  },
  created() {
     //请求数据
    GetHomeList()
      .then((res) => {
        this.banner = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newgoods = res.data.newGoodsList;
        this.hotgoods = res.data.hotGoodsList;
        this.topic=res.data.topicList
        this.category = res.data.categoryList;
      })
      .catch((err) => {
      });
  },
  //过滤器
  filters: {
    price(v) {
      return "¥" + v.toFixed(2) + "元";
    },
  },
  methods:{
    //搜索跳转搜索
    showpop(){
        this.$router.push("/home/popup")        
    },
    //品牌跳转路由
    Rout(v){
      //  console.log(v);
       this.$router.push({
         path:"/branck",
         query:{
           id:v
         }
       })      
    },
    //商品详细信息跳转
    goods(id){
      this.$router.push({
         path:"/details",
         query:{
           id:id
         }
       }) 
    }
  }
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
#pin {
  margin-top: 0.2rem;
  background-color: #fff;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49%;
      position: relative;
      div {
        position: absolute;
        top: 0.1rem;
        left: 0.1rem;
        font-size: small;
        line-height: 0.2rem;
        p {
          color: #8b0000;
        }
      }
    }
  }
}
#newgoods {
  margin-top: 0.2rem;
  background-color: #fff;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 48%;
      div {
        text-align: center;
        line-height: 0.3rem;
        font-size: small;
        p {
          color: #8b0000;
        }
      }
    }
  }
}
#hot {
  margin-top: 0.2rem;
  background-color: #fff;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  ul {
    li {
      width: 95%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: auto;
      h2 {
        width: 25%;
      }
      div {
        width: 74%;
        line-height: 0.3rem;
        h4 {
          font-size: larger;
        }
        h5 {
          font-size: small;
        }
        p {
          font-size: small;
          color: #8b0000;
        }
      }
    }
  }
}
#topic {
  margin-top: 0.2rem;
  background-color: #fff;
  padding:0 0.05rem;
  h1 {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: larger;
  }
  div{
    margin-left: 0.05rem;
     margin-bottom:0.05rem ;
    h2{
      
      width: 3rem;
      height: 2rem;
      img{
        width: 3rem;
        height: 2rem;
      }
    }
    h3{
      
      line-height: 0.4rem;
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;

    }
    p{
      font-size: small;
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
#goods {
  .goodlist {
    margin-top: 0.2rem;
    background-color: #fff;
    h1 {
      text-align: center;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: larger;
    }
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 48%;
        div {
          text-align: center;
          line-height: 0.3rem;
          font-size: small;
          p {
            color: #8b0000;
          }
        }
      }
    }
  }
}
</style>